<template>
  <div class="heat-pie-page">
    <div class="pienumber" v-if="pieLable">
      <span class="name">{{ pieLable }}{{pieunit}}</span>
    </div>
    <div ref="pie"></div>
  </div>
</template>

<script>
export default {
  name: 'QiyePage',
  data() {
    return {
      pieLable: ''
    }
  },
  props:{
    pieunit:{
      type:String,
      default:''
    },
    dataList:{
      type:Array,
      default:[]
    }
  },
  watch:{
    dataList:{
      immediate:false,
      deep:true,
      handler(newValue,old){
        if(newValue.length){
          this.PiePage(newValue, this.$refs.pie)
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    PiePage(data, ref) {
      let myChart = this.$echarts.getInstanceByDom(ref)
      if (myChart == undefined) {
        myChart = this.$echarts.init(ref)
      }
      let Opt
      Opt = {
        tooltip: {
          show: false
        },
        legend: {
          show: false
        },
        series: [
          {
            type: 'pie',
            clockwise: true,
            left: 42,
            top: 42,
            width: 100,
            height: 100,
            center: ['50%', '50%'],
            radius: ['70%', '100%'],
            avoidLabelOverlap: false,
            label: {
              show: !true
            },
            emphasis: {
              show: true
            },
            /*selectedOffset : -30,*/
            labelLine: {
              show: false
            },
            data: data
          }
        ],
        color: ['#f7695e', '#e19c23', '#07e4f0', '#1d9ded', '#07e790']
      }
      myChart.setOption(Opt, true)
      myChart.on('mouseout', (row, index) => {
        this.pieLable = ''
      })
      myChart.on('mouseover', (row, index) => {
        this.pieLable = row.name
      })
    }
  }
}
</script>

<style scoped lang="scss">
.heat-pie-page {
  position: relative;
  width: 190px;
  height: 190px;
  background: url("~@/assets/image/outer-ring.png") no-repeat center center;
  background-size: contain;
  .pienumber {
    position: absolute;
    left: 0px;
    right: 0px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;color: #fff;
    font-size: 14px;
  }

  div {
    width: 100%;
    height: 100%;
  }
}
</style>
